<template>
    <view>
        <view class="w100 info">
            <view class="ft-30 t-3 break-all"
                >大疆DJI Mini 4K 超高清迷你航拍无人机 三轴机械增稳数字图传 新手入门级别</view
            >
            <view class="info-price mt-16 line-height1">
                <text class="ft-40">2000~5000</text>
                <text class="ft-24 ml-6">积分</text>
            </view>
        </view>
        <view class="w100 space-between align-center count p-30">
            <view class="ft-28 t-3">数量</view>
            <NumberBox :value="count" @change="change" />
        </view>
    </view>
</template>

<script setup>
/**
 * @description 商品信息
 * @author yinzhi
 * @date 2025-03-19
 */
import { ref, defineComponent } from 'vue'
import NumberBox from './NumberBox.vue'
defineComponent({
    name: 'GoodsInfo',
    components: {
        NumberBox
    }
})

const props = defineProps({
    // 商品信息
    info: {
        type: Object,
        default: () => {}
    },
    // 兑换数量
    count: {
        type: Number,
        default: 1
    }
})

const emit = defineEmits()
const change = value => {
    emit('change', value)
}
</script>

<style scoped lang="scss">
.info {
    padding: 24rpx 30rpx 30rpx;
    border-bottom: 16rpx solid #f6f6f6;
    &-price {
        color: #e51c23;
    }
}
.count {
    border-bottom: 16rpx solid #f6f6f6;
}
</style>
